


<template>
  <div>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <template #header>
        <el-button type="primary" size="default" icon="ele-Plus" :disabled="!category3Id" @click="emit('setState', 1)">
          添加spu</el-button>
      </template>
      <!-- card body -->
      <el-table border stripe :data="SpuListData">
        <el-table-column label="序号" type="index" width="100" />
        <el-table-column label="Spu名称" prop="spuName">
        </el-table-column>
        <el-table-column label="Spu描述" prop="description">
        </el-table-column>
        <el-table-column label="操作">
          <!-- 显示自定义内容 插槽  这里的row是 每条当前 Spu属性的 值 -->
          <template v-slot="{ row, $index }">
            <el-button type="primary" size="small" @click="emit('setState', 2, row)" title="添加SKU" icon="ele-Plus">
            </el-button>
            <el-button type="primary" size="small" @click="emit('setState', 1, row)" title="编辑SPU" icon="ele-Edit">
            </el-button>
            <el-button type="info" size="small" @click="showDetail(row)" title="查看SKU" icon="ele-Warning"></el-button>
            <!-- 删除spu -->
            <el-button type="danger" @click="deleteSpu(row)" size="small" title="删除SPU" icon="ele-Delete">
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination v-model:page-size="limit" v-model:current-page="page" :page-sizes="[3, 5, 7, 9]" :pager-count="5"
        layout="prev, pager, next, sizes" :total="total" />



      <el-dialog v-model="dialogTableVisible" title="Sku列表">
        <el-table :data="skuList">
          <el-table-column property="date" label="名称" prop="skuName" />
          <el-table-column property="name" label="价格" prop="price" />
          <el-table-column property="address" label="重量" prop="weight" />
          <el-table-column property="address" label="默认图片">
            <template v-slot="{ row }">
              <img :src="row.skuDefaultImg" width="120" />
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>

    </el-card>
  </div>
</template>

<script lang="ts">

import { defineComponent } from 'vue';
import { requestFindBySpuId, type SkuInfoListType } from '@/api/sku';
export default defineComponent({
  name: 'SpuList',
});
</script>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus';
import useAttrStore from '@/stores/attr';
import { storeToRefs } from 'pinia';
import { requestDeleteSpu, requestSpuList, type SpuInfoType, type SpuListType } from '@/api/spu';

let page = ref(1)
let limit = ref(3)
let total = ref(0)

//获取三级id
const attrStore = useAttrStore()

const { category3Id } = storeToRefs(attrStore)

//创建新的SpuList响应式数据保存
let SpuListData = ref<SpuInfoType[]>([])

//请求数据
const getSpuList = async () => {
  try {
    const result = await requestSpuList(page.value, limit.value, category3Id.value as number)
    //把分页数据中的总数和分类列表交给我们的响应式数据
    SpuListData.value = result.records
    total.value = result.total
  } catch (e) {
    ElMessage.error("请求spulist数据失败")
  }
}

//静态3id的变化请求spulist数据
watch(category3Id, () => {
  //判断 没有3id的时候不能显示
  if (!category3Id.value) {
    SpuListData.value = []
    total.value = 0
    return
  }
  //一旦cayegory3Id发生变化,就立即发送请求 请求新的分页列表
  getSpuList()

}, { immediate: true })

// 2.监视limit和page的改变 然后发请求
watch([page, limit], () => {
  if (category3Id.value === null) {
    return
  }
  getSpuList()
})



//接受自定义事件
const emit = defineEmits<{
  (event: "setState", state: number, row?: SpuInfoType): void
}>()



//删除某个Spu
const deleteSpu = async (row: SpuInfoType) => {
  try {
    await requestDeleteSpu(row.id as number);
    //发送请求
    getSpuList();
  } catch (e) {
    ElMessage.error("删除数据失败");
  }
};


//控制弹窗显示隐藏
const dialogTableVisible = ref(false);
//保存 skuList 
const skuList = ref<SkuInfoListType>([]);
//查看sku列表
const showDetail = async (row: SpuInfoType) => {
  //打开弹窗
  dialogTableVisible.value = true;
  try {
    const result = await requestFindBySpuId(row.id as number);
    skuList.value = result;
  } catch (e) {
    ElMessage.error("查看Sku列表失败");
  }
};





</script>